<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 100%;
        }

        .box-hd {
            display: flex;
            justify-content: space-between;
            margin: 10px 0;
        }

        .clearfix {
            display: flex;
            flex-wrap: wrap;
        }

        .clearfix>li {
            width: 24%;
            height: 350px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border: 1px solid orange;
            margin: 10px 5px;
        }

        .clearfix>li:hover {
            position: relative;
            bottom: 5px;
            box-shadow: 5px 10px 20px 2px;
        }

        img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
    </div>
    <div class="box-bd">
        <ul class="clearfix">
            <!-- <li>
                <img src="/imgs/timthumb(1).jpg" alt="">
                <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                <div class="info"><span>高级</span>•<span>1125</span>人在学习</div>
            </li> -->

        </ul>
    </div>

    <script>
        let data = [
            {
                src: '/imgs/timthumb(2).jpg',
                title: 'Android 网络动态图片',
                num: 1166
            },
            {
                src: '/imgs/timthumb(3).jpg',
                title: 'Angular2 大前端商城实战项目演练',
                num: 666
            },
            {
                src: '/imgs/timthumb(4).jpg',
                title: 'Android 实战项目演练',
                num: 8869
            },
            {
                src: '/imgs/timthumb(2).jpg',
                title: '前端 从入门到精通',
                num: 1266
            },
            {
                src: '/imgs/timthumb(1).jpg',
                title: '加油',
                num: 776
            },
        ]
    </script>
    <script>
        let ul = document.querySelector('.clearfix')
        // 根据数据的个数，决定这小li的个数
        for (let i = 0; i < data.length; i++) {
            // 创建小li
            let li = document.createElement('li')
            // 4.先准备好内容，再追加
            li.innerHTML = `
                <img src=${data[i].src} alt="">
                <h4>${data[i].title}</h4>
                <div class="info"><span>高级</span>•<span>${data[i].num}</span>人在学习</div>
            `
            // 3.追加ul 父元素.appendChild（子元素）
            ul.appendChild(li)
        }
    </script>
</body>

</html>